<!--
  @description: 列表页布局组件
  @filePath:src\components\ListPaper\index.vue
-->
<template>
    <div class="layout-content">
        <div class="list-layout">
            <!-- 顶部插槽 -->
            <slot name="before-header"></slot>
            <header class="list-header">
                <!-- 顶部返回区域插槽 -->
                <slot name="header-back"></slot>
                <div class="header-search">
                    <!-- 顶部搜索区域插槽 -->
                    <slot name="header-search"></slot>
                </div>
                <div class="header-button">
                    <!-- 顶部右侧按钮插槽 -->
                    <slot name="header-button"></slot>
                </div>
            </header>
            <main ref="listMain" class="list-main">
                <!-- 中间内容区域插槽 -->
                <div class="list-button-box">
                    <slot name="list-button"></slot>
                </div>
                <div ref="listBox" class="list-box">
                    <slot name="list" :table-height="tableHeight"></slot>
                </div>
            </main>
            <slot name="total-row"></slot>
            <footer class="list-footer">
                <div>
                    <!-- 底部左侧按钮区域插槽 -->
                    <slot name="footer-buttons"></slot>
                </div>
                <!-- 底部右侧按钮区域插槽 -->
                <slot name="footer"></slot>
            </footer>
        </div>
    </div>
</template>
<script lang="ts">
import { debounce } from 'lodash-es';
import { nextTick, onActivated, onBeforeUnmount, onMounted, ref } from 'vue';
export default {
    name: 'LotsListPaper',
};
</script>
<script lang="ts" setup>
const tableHeight = ref<string | number>(0);
const listMain = ref<HTMLElement>();
const listBox = ref<HTMLElement>();
onActivated(() => {
    nextTick(() => {
        const t = 120;
        setTimeout(() => {
            resetTableHeight();
        }, t);
    });
});
onMounted(() => {
    nextTick(() => {
        resetTableHeight();
    });
    window.addEventListener('resize', resize);
});
onBeforeUnmount(() => {
    window.removeEventListener('resize', resize);
});

const resize = debounce(() => {
    resetListHeight();
    nextTick(() => {
        resetTableHeight();
    });
}, 100);
const resetListHeight = () => {
    /* 将table 设置为一个较小的值，让 listBox 高度重新自适应 */
    tableHeight.value = 30;
};
const resetTableHeight = () => {
    tableHeight.value = listBox.value
        ? window.getComputedStyle(listBox.value).height
        : 0;
    // 解决使用多层lotsListPaper组件包裹后，打开控制台再关闭后，最内层高度计算错误，导致页面不能完全展开
    // let timer = setTimeout(() => {
    //     tableHeight.value = listBox.value ? window.getComputedStyle(listBox.value).height : 0;
    //     clearTimeout(timer);
    // });
};
</script>
<style lang="less">
@import './index.less';
.list-layout-wrapper {
    display: flex;
}
.layout-content {
    height: 100%;
    .list-main {
        display: flex;
        flex-direction: column;
        .list-button-box {
            display: flex;
            > .md-button {
                margin-right: 15px;
                margin-bottom: 10px;
            }
        }
        .list-box {
            display: flex;
            flex-direction: column;
            > .table-box {
                flex: auto;
            }
            > .edit-table-box {
                flex: auto;
                display: flex;
                flex-direction: column;
                > .edit-table-box-table {
                    flex: auto;
                }
            }
        }
    }
}
</style>
